/**
 * 角色表格
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Icon, Popconfirm } from 'antd';
import getPagination from '../../components/pagination';
import { connect } from 'dva';

const styles = {
	icon: {
		fontSize: '16px',
		marginRight: '1em'
	}
};

const columns = [
	{
		title: '角色名',
		dataIndex: 'roleName',
		key: 'name',
	},
	{
		title: '简介',
		dataIndex: 'remark',
		key: 'des'
	},
	{
		title: '系统用户数量',
		dataIndex: 'sysUserCount',
		key: 'sysUserCount'
	},
	{
		title: '操作',
		key: 'opt'
	}
];

@connect(({ sysRole }) => ({ sysRole }))
class MyTable extends Component {
	constructor(props, context) {
		super(props, context);

		this.columns = columns.map(c => c.key !== 'opt' ? c : { ...c, render: this.renderOpt });
	}

	renderOpt = (text, record) => {
		return (
			<span>
				<Icon
					type="edit"
					onClick={() => this.props.edit(record)}
					style={styles.icon}
					className="cursor"
				/>
				<Popconfirm
					title="确定删除该角色吗？"
					onConfirm={() => this.props.delete(record)}
					okText="确定"
					cancelText="取消"
				>
					<Icon type="delete" style={styles.icon} className="cursor" />
				</Popconfirm>
			</span>
		);
	}


	onPageChange = (current, size) => {
		const { dispatch } = this.props;
		dispatch({
			type: 'sysRole/query',
			payload: {
				current,
			}
		});
	}

	onSizeChange = (current, size) => {
		const { dispatch } = this.props;
		dispatch({
			type: 'sysRole/query',
			payload: {
				size,
			}
		});
	}

	render() {
		const { list, sysRole } = this.props;
		const { pageSize, current, total } = sysRole;
		return (
			<Table
				dataSource={list}
				columns={this.columns}
				pagination={getPagination({
					pageSize, current, total,
					onChange: this.onPageChange,
					onShowSizeChange: this.onSizeChange,
				})}
			/>
		);
	}
}

MyTable.propTypes = {

};

export default MyTable;
